<template>
  <basic-container :btn-flag="true">
    <div class="time-group">规划统计
      <div style="float: right;">
        <span class="demonstration">时间范围：</span>
        <el-date-picker
          v-model="SstartYear"
          type="year"
          clearable
          value-format="yyyy"
          placeholder="选择开始时间">
        </el-date-picker>至
        <el-date-picker
          v-model="SendYear"
          type="year"
          clearable
          value-format="yyyy"
          placeholder="选择结束时间">
        </el-date-picker>
      </div>
    </div>
    <div class="chart-content" id="myChart-rank" :style="{width: '100%', height: '500px'}"></div>
    <avue-crud
      :data="tableData"
      :option="option"
    >
      <template slot-scope="scope" slot="menu">
        <div class="menu-title" @click.stop="showDetail(scope.row,scope.index)">
          <img src="/img/view.png" class="menu-title-img">
          <p class="menu-title-text">查看</p>
        </div>
      </template>
    </avue-crud>
  </basic-container>
</template>
<script>
  import {projectStatistics} from "@/api/planning/project";
  import {PROJECT_DIC} from '@/const/dict'
  var categoryList = ['D','C','B','A']
  export default {
    name: "wel",
    data() {
      return {
        SstartYear:'2015',
        SendYear:'2019',
        startYear:2015,
        endYear:2019,
        tableData: [],
        option: {
          page: false,
          menu:false,
          addBtn: false,
          editBtn: false,
          addRowBtn: false,
          indexLabel: "序号",
          index: true,
          indexWidth:70,
          cellBtn: false,
          delBtn: false,
          columnBtn: false,
          refreshBtn: false,
          filterBtn: false,
          searchBtn: false,
          keyId: "id",
          column: []
        }
      };
    },
    watch:{
      SstartYear(val,oldVal){
        if(!val){
          this.$notify({
            title: "提醒",
            type: "warning",
            message: "时间范围不能为空",
            duration: 2000
          });
          this.SstartYear = oldVal
          return
        }
        this.startYear = parseInt(val)
        if(this.startYear>this.endYear){
          this.$notify({
            title: "提醒",
            type: "warning",
            message: "开始时间不能大于结束时间",
            duration: 2000
          });
          this.SstartYear = oldVal
          this.startYear = parseInt(oldVal)
          return
        }
        this.option.column = this.getColumn(this.startYear,this.endYear + 1)
        this.init()
      },
      SendYear(val,oldVal){
        if(!val){
          this.$notify({
            title: "提醒",
            type: "warning",
            message: "时间范围不能为空",
            duration: 2000
          });
          this.SendYear = oldVal
          return
        }
        this.endYear = parseInt(val)
        if(this.startYear>this.endYear){
          this.$notify({
            title: "提醒",
            type: "warning",
            message: "开始时间不能大于结束时间",
            duration: 2000
          });
          this.SendYear = oldVal
          this.endYear = parseInt(oldVal)
          return
        }
        this.option.column = this.getColumn(this.startYear,this.endYear + 1)
        this.init()
      }
    },
    created() {
      this.option.column = this.getColumn(this.startYear,this.endYear + 1)
      this.init()
    },
    methods: {
      async init(){
        await projectStatistics({startYear:this.startYear,endYear:this.endYear}).then(response => {
          var records = response.data.data
          this.tableData = [];
          this.tableData.push(this.getTableData(this.getCategoryData(records,'A'),'A',this.startYear,this.endYear + 1))
          this.tableData.push(this.getTableData(this.getCategoryData(records,'B'),'B',this.startYear,this.endYear + 1))
          this.tableData.push(this.getTableData(this.getCategoryData(records,'C'),'C',this.startYear,this.endYear + 1))
          this.tableData.push(this.getTableData(this.getCategoryData(records,'D'),'D',this.startYear,this.endYear + 1))
          this.getTitleDate(this.startYear,this.endYear + 1)
          this.drawRank(this.getTitleDate(this.startYear,this.endYear + 1),this.dealData(records,this.startYear,this.endYear + 1));
        });
      },
      getCategoryData(list,category){
        return list.filter(item => item.category == category)
      },
      dealData(list,startYear,endYear){
        var seriesList = []
        for(var year=startYear;year<endYear;year++){
          var yearList = list.filter(item => item.year == year)
          var yearMap = {
            name: year + '年',
            type: 'bar',
          }
          var dataList = []
          for(var i in categoryList){
            var flag = false
            for(var j in yearList){
              if(yearList[j].category == categoryList[i]){
                dataList.push(yearList[j].count);
                flag = true
              }
            }
            if(!flag){
              dataList.push(0);
            }
          }
          yearMap.data = dataList
          seriesList.push(yearMap)
        }
        return seriesList
      },
      getTitleDate(startYear,endYear){
        var dataList = []
        for(var i = startYear;i<endYear;i++){
          dataList.push(i + '年')
        }
        return dataList;
      },
      getColumn(startYear,endYear){
        var dataList = []
        for(var i = startYear;i<endYear;i++){
          var columnMap = {
            label: i + '年',
            prop: i + '',
            cell:true
          }
          dataList.push(columnMap)
        }
        return [{
          label: "规划类型",
          width: 240,
          prop: "category",
          type: "select",
          dicData: PROJECT_DIC.CATEGORY,
          cell: true
        }].concat(dataList)
      },
      getTableData(list,category,startYear,endYear){
        var map = {
          category:category
        }
        for(var j = startYear;j<endYear;j++){
          var valFlag = false;
          for(var i in list){
            if(j == list[i].year){
              map[list[i].year + ''] = list[i].count
              valFlag = true
            }
          }
          if(!valFlag){
            map[j + ''] = 0
          }
        }
        return map;
      },
      drawRank(titleData,seriesList) {
        // 基于准备好的dom，初始化echarts实例
        let myChart = this.$echarts.init(document.getElementById("myChart-rank"));
        // 绘制图表
        myChart.setOption({
          title: {
            text: '规划统计',
            subtext: '数据来自湖北省规划管理信息系统'
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            }
          },
          legend: {
            data: titleData
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: {
            type: 'value',
            boundaryGap: [0, 0.01]
          },
          yAxis: {
            type: 'category',
            data: ['空间规划','区域规划','专项规划','发展规划']
          },
          series: seriesList
        },true);
      }
    }
  };
</script>

<style scoped="scoped" lang="scss">
  .time-group{
    margin: 30px 0;
    background-color: #42a6dc;
    height: 40px;
    line-height: 40px;
    padding: 0 10px;
    color: #fff;
  }
</style>

